---
title: Menu Item
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Univerzální položka menu navržená k použití v menu nebo navigačním seznamu.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Vlastnosti       | Typ                | Popis                                                                                                                      |
| ---------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| Levá ikona       | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu                                                                  |
| akcent           | textový řetězec    | Určuje barvu akcentu položky menu. Options include: `default`, `danger`, and `placeholder` |
| text             | textový řetězec    | Textový obsah položky menu                                                                                                 |
| ikonová tlačítka | pole               | Seznam objektů představujících další ikony tlačítek spojené s položkou menu                                                |
| isTooltipOpen    | booleovská hodnota | Řídí viditelnost tooltipu spojeného s položkou menu                                                                        |
| testId           | textový řetězec    | Atribut data-testid pro testovací účely                                                                                    |
| onClick          | funkce             | Funkce zpětného volání spuštěná při kliknutí na položku menu                                                               |
| className        | textový řetězec    | Volitelný název pro dodatečné stylování                                                                                    |

</Tab>
</Tabs>

## Variants

Různé varianty komponenty položky menu zahrnují následující:

### Příkaz

Položka menu ve stylu příkazu v menu pro označení klávesových zkratek.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Vlastnosti   | Typ                | Popis                                                        |
| ------------ | ------------------ | ------------------------------------------------------------ |
| Levá ikona   | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu    |
| text         | textový řetězec    | Textový obsah položky menu                                   |
| firstHotKey  | textový řetězec    | První klávesová zkratka spojená s příkazem                   |
| secondHotKey | textový řetězec    | Druhá klávesová zkratka spojená s příkazem                   |
| isSelected   | booleovská hodnota | Určuje, zda je položka menu vybrána nebo zvýrazněna          |
| onClick      | funkce             | Funkce zpětného volání spuštěná při kliknutí na položku menu |
| className    | textový řetězec    | Volitelný název pro dodatečné stylování                      |

</Tab>
</Tabs>

### Draggable

A draggable menu item component designed to be used in a menu or list where items can be dragged, and additional actions can be performed through icon buttons.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Vlastnosti       | Typ                | Popis                                                                                        |
| ---------------- | ------------------ | -------------------------------------------------------------------------------------------- |
| Levá ikona       | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu                                    |
| akcent           | textový řetězec    | Barva akcentu položky menu. Může být `default`, `placeholder`, nebo `danger` |
| ikonová tlačítka | pole               | Seznam objektů představujících další ikony tlačítek spojené s položkou menu                  |
| isTooltipOpen    | booleovská hodnota | Řídí viditelnost tooltipu spojeného s položkou menu                                          |
| onClick          | funkce             | Funkce zpětného volání spuštěná při kliknutí na odkaz                                        |
| text             | textový řetězec    | Textový obsah položky menu                                                                   |
| isDragDisabled   | booleovská hodnota | Určuje, zda je táhnutí zakázáno                                                              |
| className        | textový řetězec    | Volitelný název pro dodatečné stylování                                                      |

</Tab>
</Tabs>

### Multi Select

Provides a way to implement multi-select functionality with an associated checkbox.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Vlastnosti    | Typ                | Popis                                                                 |
| ------------- | ------------------ | --------------------------------------------------------------------- |
| Levá ikona    | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu             |
| text          | textový řetězec    | Textový obsah položky menu                                            |
| vybráno       | booleovská hodnota | Označuje, zda je položka menu vybrána (zaškrtnuta) |
| poZměněVýběru | funkce             | Funkce zpětného volání spuštěná při změně stavu zaškrtávacího políčka |
| className     | textový řetězec    | Volitelný název pro dodatečné stylování                               |

</Tab>
</Tabs>

### Multi Select Avatar

A multi-select menu item with an avatar, a checkbox for selection, and textual content.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Vlastnosti    | Typ                | Popis                                                                 |
| ------------- | ------------------ | --------------------------------------------------------------------- |
| avatar        | `ReactNode`        | Avatar nebo ikona, která se zobrazuje na levé straně položky menu     |
| text          | textový řetězec    | Textový obsah položky menu                                            |
| vybráno       | booleovská hodnota | Označuje, zda je položka menu vybrána (zaškrtnuta) |
| poZměněVýběru | funkce             | Funkce zpětného volání spuštěná při změně stavu zaškrtávacího políčka |
| className     | textový řetězec    | Volitelný název pro dodatečné stylování                               |

</Tab>
</Tabs>

### Navigovat

Položka menu s volitelnou levou ikonou, textovým obsahem a ikonou šipky vpravo.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Vlastnosti | Typ                | Popis                                                        |
| ---------- | ------------------ | ------------------------------------------------------------ |
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu    |
| text       | textový řetězec    | Textový obsah položky menu                                   |
| onClick    | funkce             | Funkce zpětného volání spuštěná při kliknutí na položku menu |
| className  | textový řetězec    | Volitelný název pro dodatečné stylování                      |

</Tab>
</Tabs>

### Vybrat

Výběrová položka menu, s volitelným levým obsahem (ikonou a textem) a indikátorem (ikonou zaškrtnutí) pro vybraný stav.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Vlastnosti | Typ                | Popis                                                                 |
| ---------- | ------------------ | --------------------------------------------------------------------- |
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu             |
| text       | textový řetězec    | Textový obsah položky menu                                            |
| vybráno    | booleovská hodnota | Označuje, zda je položka menu vybrána (zaškrtnuta) |
| neaktivní  | booleovská hodnota | Označuje, zda je položka menu deaktivována                            |
| zvýrazněno | booleovská hodnota | Označuje, zda je položka menu aktuálně zvýrazněna                     |
| onClick    | funkce             | Funkce zpětného volání spuštěná při kliknutí na položku menu          |
| className  | textový řetězec    | Volitelný název pro dodatečné stylování                               |

</Tab>
</Tabs>

### Vybrat Avatar

Výběrová položka menu s avatarem, s volitelným levým obsahem (avatar a text) a indikátorem (ikonou zaškrtnutí) pro vybraný stav.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Vlastnosti | Typ                | Popis                                                                 |
| ---------- | ------------------ | --------------------------------------------------------------------- |
| avatar     | `ReactNode`        | Avatar nebo ikona, která se zobrazuje na levé straně položky menu     |
| text       | textový řetězec    | Textový obsah položky menu                                            |
| vybráno    | booleovská hodnota | Označuje, zda je položka menu vybrána (zaškrtnuta) |
| neaktivní  | booleovská hodnota | Označuje, zda je položka menu deaktivována                            |
| zvýrazněno | booleovská hodnota | Označuje, zda je položka menu aktuálně zvýrazněna                     |
| testId     | textový řetězec    | Atribut data-testid pro testovací účely                               |
| onClick    | funkce             | Funkce zpětného volání spuštěná při kliknutí na položku menu          |
| className  | textový řetězec    | Volitelný název pro dodatečné stylování                               |

</Tab>
</Tabs>

### Vybrat barvu

Volitelná položka menu s ukázkou barvy pro situace, kdy chcete, aby uživatelé zvolili barvu z menu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Vlastnosti | Typ                | Popis                                                                                                                                                                                                      |
| ---------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| barva      | textový řetězec    | The theme color to be displayed as a sample in the menu item. Možnosti zahrnují: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow` a `gray` |
| vybráno    | booleovská hodnota | Označuje, zda je položka menu vybrána (zaškrtnuta)                                                                                                                                      |
| neaktivní  | booleovská hodnota | Označuje, zda je položka menu deaktivována                                                                                                                                                                 |
| zvýrazněno | booleovská hodnota | Označuje, zda je položka menu aktuálně zvýrazněna                                                                                                                                                          |
| varianta   | textový řetězec    | Varianta ukázky barvy. Může být buďto `default` nebo `pipeline`                                                                                                                            |
| onClick    | funkce             | Funkce zpětného volání spuštěná při kliknutí na položku menu                                                                                                                                               |
| className  | textový řetězec    | Volitelný název pro dodatečné stylování                                                                                                                                                                    |

</Tab>
</Tabs>

### Přepínač

Položka menu s přidruženým přepínačem k umožnění nebo zakázání určité funkce

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Vlastnosti        | Typ                | Popis                                                        |
| ----------------- | ------------------ | ------------------------------------------------------------ |
| Levá ikona        | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu    |
| text              | textový řetězec    | Textový obsah položky menu                                   |
| přepnuto          | booleovská hodnota | Označuje, zda je přepínač v "zapnutém" nebo "vypnutém" stavu |
| naZměnuPřepnutí   | funkce             | Funkce zpětného volání spuštěná při změně stavu přepínače    |
| velikostPřepínače | textový řetězec    | Velikost přepínače. Může být buď \          |
| className         | textový řetězec    | Volitelný název pro dodatečné stylování                      |

</Tab>
</Tabs>
